<template>
  <el-row class="wrap">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #837e7c;font-weight: normal;">AI外呼</span></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/2-2' }"><span style="color: #5d9cec;cursor: pointer;">通话记录</span></el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24" class="wrap-main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div>
            <h4 style="display:inline">基本信息</h4>
            <el-button style="float: right;" size="small" type="success" @click="goBack()">返回</el-button>
          </div>
        </div>
        <div class="text item">
          <el-col :span="24">
            <el-row>
              <el-col :span="12" class="gg-callDetailContainer">
                <ul class="gg-callDetailList">
                  <li>
                    呼叫类型:外呼
                  </li>
                  <li>
                    任务ID:15357029382585335022
                  </li>
                  <li>
                    IVR流程:悟空理财复投
                  </li>
                  <li>
                    呼叫开始时间:2018-08-31 16:09:13
                  </li>
                  <li>
                    通话状态:成功
                  </li>
                </ul>
              </el-col>
              <el-col :span="12">
                <ul class="gg-callDetailList">
                  <li>
                    主叫号码:4022000001
                  </li>
                  <li>
                    任务名称:催收
                  </li>
                  <li>
                    呼叫ID:3E8-5B5C76AC-9497-0
                  </li>
                  <li>
                    呼叫结束时间:2018-08-31 16:09:52
                  </li>
                  <li>
                    挂断方:系统端
                  </li>
                </ul>
              </el-col>
            </el-row>
          </el-col>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <h4 style="display: inline;">客户意向等级</h4>
        </div>
        <div class="text item">
          <el-col :span="24">
            <el-row style="padding: 10px 0px; margin-bottom: 20px;">
              <el-button size="small" type="success">A级(强烈意向)</el-button>
              <el-button size="small" type="primary">B级(一般意向)</el-button>
              <el-button size="small" type="danger">C级(跟进客户)</el-button>
              <el-button size="small" type="info">D级(无意向)</el-button>
            </el-row>

          </el-col>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px;margin-bottom: 20px;">
        <div slot="header" class="clearfix">
          <h4 style="display: inline;">录音信息</h4>
        </div>
        <div class="text item">
          <el-col :span="24">
            <el-row style="padding-bottom: 20px;">
              <el-col :span="12">
                <audio controls controlsList="nodownload">
                  <source src="../../../static/mp3/fk.mp3" type="audio/mpeg">
                  您的浏览器不支持 audio 元素。
                </audio>
              </el-col>
              <el-col :span="12">
                <div style="line-height: 50px;letter-spacing: 2px;">
                  <i class="fa fa-eye"></i>
                  <a href="javascript:void(0)" style="color: #409eff;font-size: 14px;" @click="showCallNotes();">查看通话记录</a>
                </div>
              </el-col>

            </el-row>
          </el-col>
        </div>
      </el-card>
    </el-col>

    <!--通话记录模态框-->
    <el-dialog title="通话记录" :visible.sync="callNotesVisible" :close-on-click-modal="false">
        <img src="../../../static/imgs/u115.png"/>
    </el-dialog>
  </el-row>

</template>

<script>
    export default {
        name: "CallDetail",
        data(){
          return{
            callNotesVisible:false,
          }
        },
        methods:{
          showCallNotes:function(){
            this.callNotesVisible=true;
          },
          goBack:function () {
            this.$router.push("/2-2")
          }
        }
    }
</script>

<style scoped>
  .gg-callDetailList{
    list-style: none;
    margin-top: 0;

  }
  .gg-callDetailContainer:nth-child(odd){
    border-right: 1px solid #dddddd;
  }
.gg-callDetailList li{
  font-size: 14px;
  color: #333;
  letter-spacing: 1px;
  padding: 5px 10px;
  line-height: 30px;
}
</style>
